import { Card } from 'antd'
import { render } from 'react-dom'

import { createBrowserSenderForMultiBid } from '@slardar/helper'
import { getXhrTransport } from '@slardar/sdk-web'
import { createBrowserClient, BrowserConfig, getReportUrl, DEFAULT_SENDER_SIZE } from '@slardar/web'

import { TriggerEvent } from './event'
import { TriggerPageview } from './pageview'

declare global {
  interface Window {
    SdkClient: typeof import('@slardar/web').default
  }
}
const client = createBrowserClient({
  createSender: (config: BrowserConfig) =>
    createBrowserSenderForMultiBid({
      size: DEFAULT_SENDER_SIZE,
      endpoint: getReportUrl(config.domain),
      transport: getXhrTransport(),
    }),
})

const $root = document.querySelector('#app')
const start = () => {
  client.start()
}

const triggerMultiBidEvent = () => {
  ;['a', 'b', 'c', 'd'].forEach((e) => {
    client.send({
      ev_type: 'custom',
      common: {
        bid: e,
        pid: 'test',
      },
      payload: {
        name: e,
        type: 'event',
      },
    })
  })
}

const App = () => {
  return (
    <div className="app">
      <style>
        {`* {
          margin: 0;
          padding: 0
        }`}
      </style>
      <Card>
        <h1>Slardar SDK</h1>
        <p>Testing by cypress</p>
        <button id="start" onClick={start}>
          Start
        </button>
        <TriggerEvent />
        <TriggerPageview />
        <button id="trigger-multi-bid-event" onClick={triggerMultiBidEvent}>
          trigger-multi-bid-event
        </button>
      </Card>
    </div>
  )
}

render(<App />, $root!)

client('init', { ...Cypress.env().config, bid: 'super' })
client('on', 'init', () => {
  client?.getSender()?.setSize(0)
  client?.getSender()?.setWait(0)
})
